<template>
    <div
        style="display: inline-flex"
        :style="
            Object.assign(styles, {
                'background-image': 'url(' + conf.data + ')',
                'background-size': '100% 100%',
                'color': color,
                'width': (width ?? size) + 'rpx',
                'height': (height ?? size) + 'rpx'
            })
        "
        :class="classs"
    ></div>
</template>

<script lang="ts" setup>
import { reactive, watch, onUnmounted } from 'vue'
import { StrUtil } from 'tools-uniapp'
__v1

const val = {
    __v2
}

const props = defineProps({
    /**
     * 使用的库名称，如Ant
     */
    lib: { default: 'ant' as keyof typeof val },
    /**
     * 图标名称，如left
     */
    name: {
        default: 'plus' as __v3
    },
    /**
     * 图标大小
     */
    size: { default: '20' },
    /**
     * 图标大小-宽
     */
    width: { default: undefined },
    /**
     * 图标大小-高
     */
    height: { default: undefined },
    /**
     * 图标颜色，如:#000、['#fff','#000']
     */
    color: { default: undefined as any },
    /**
     * 样式
     */
    classs: { default: '' },
    /**
     * 样式
     */
    styles: { default: {} },
    /**
     * 如果为true，使用设计的图标颜色使得color属性无效。默认为false，一般用于多色或固定色图标
     */
    nofill: { default: false }
})

const confObj = {
    url: '',
    lib: '',
    name: '',
    size: '',
    color: '',
    nofill: ''
}

const viconConf = {
    name: 'ant',
    type: 'up',
    size: '20',
    color: 'currentColor',
    nofill: false
}

const loadProps = () => {
    Object.keys(confObj).forEach((key) => {
        //@ts-ignore
        confObj[key] = StrUtil.isNull(props[key]) ? viconConf[key] : props[key]
    })
}

const w = watch(
    () => [props.name, props.lib, props.color, props.size, props.nofill],
    () => {
        init()
    }
)

onUnmounted(() => {
    w()
})

const svgToUrl = (url: string) => {
    var encoded = url
        .replace(/<!--(.*)-->/g, '')
        .replace(/[\r\n]/g, ' ')
        .replace(/"/g, `'`)
        .replace(/%/g, '%25')
        .replace(/&/g, '%26')
        .replace(/#/g, '%23')
        .replace(/{/g, '%7B')
        .replace(/}/g, '%7D')
        .replace(/</g, '%3C')
        .replace(/>/g, '%3E')
    let res = '"' + `data:image/svg+xml,${encoded}` + '"'
    return res
}

const conf = reactive({
    data: ''
})

const viewBoxStr = '#{viewBox}'
const viewBoxDefault = '0 0 1024 1024'
const str = {
    svg: [`<svg viewBox="${viewBoxStr}" version="1.1" xmlns="http://www.w3.org/2000/svg">`, '</svg>'],
    get0: (replacestr: string) => {
        return str.svg[0].replace(viewBoxStr, replacestr)
    },
    getPath: (param: { d: string; fill?: string }) => {
        return `<path d="${param.d}" fill="${param.fill ?? 'currentColor'}" />`
    }
}
const init = async () => {
    loadProps()
    const color = ['color:black;', 'color:red;']
    if (StrUtil.isNull(confObj.name)) return
    let filestr: any = (val as any)[confObj.lib]?.[confObj.name]

    if (!filestr) {
        console.info(
            `%c icon <%c${confObj.lib}-${confObj.name}%c> 不存在`,
            `${color[0]} font-size:12px`,
            color[1],
            color[0]
        )
        return
    }

    if (typeof filestr === 'string') filestr = JSON.parse(filestr)

    let res = ''
    let objt: { d: string[]; fill: { [key: string]: number[] }; viewBox?: string } = filestr
    objt.fill = objt.fill ?? { currentColor: [0] }
    res = str.get0(objt.viewBox ?? viewBoxDefault)
    const getFill = (fill: { [key: string]: number[] }, index: number) => {
        const fillkeys = Object.keys(fill)
        const colors = confObj.color

        for (let i = 0; i < fillkeys.length; i++) {
            const key = fillkeys[i]
            const nums = fill[key]
            if (nums.includes(index)) {
                if (!confObj.nofill && colors) {
                    if (Array.isArray(colors)) return colors[i] ?? colors[colors.length - 1]
                    return colors
                } else {
                    return key
                }
            }
        }

        return 'currentColor'
    }

    objt.d.forEach((item, index) => {
        res += str.getPath({
            d: item,
            fill: getFill(objt.fill, index)
        })
    })
    res += str.svg[1]

    conf.data = svgToUrl(res)
}
init()
</script>
